<nz-drawer
  [nzClosable]="true"
  [nzVisible]="show"
  [nzPlacement]="'right'"
  [nzTitle]="projectDrawerTitle"
  [nzContent]="projectDrawerContent"
  (nzOnClose)="close()"
  [nzWidth]="900"
  [nzCloseIcon]="closeIcon"
></nz-drawer>

<ng-template #projectDrawerTitle>
  <div class="d-flex align-items-center w-100">
    <nz-breadcrumb style="margin-left: -15px;">
      <nz-breadcrumb-item>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        {{project?.name}}
      </nz-breadcrumb-item>
    </nz-breadcrumb>
    <div class="ms-auto">
      <nz-space>
        <button *nzSpaceItem nz-button [nzType]="'primary'"  nz-dropdown [nzDropdownMenu]="exportDropdown" [nzPlacement]="'bottomRight'" [nzLoading]="exporting">
          导出 <span nz-icon [nzType]="'down'"></span>
        </button>
        <nz-dropdown-menu #exportDropdown="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item (click)="exportMembers()">成员</li>
            <li nz-menu-item (click)="exportTasks()">任务</li>
          </ul>
        </nz-dropdown-menu>
      </nz-space>
    </div>
  </div>
</ng-template>

<ng-template #projectDrawerContent>
  <ng-container *ngIf="project">
    <nz-tabset [nzType]="'card'">
      <nz-tab [nzTitle]="'概览'" (nzClick)="overview.get()">
        <worklenz-rpt-project-drawer-overview
          [projectId]="project.id" #overview
        ></worklenz-rpt-project-drawer-overview>
      </nz-tab>
      <nz-tab [nzTitle]="'成员'">
        <worklenz-rpt-project-drawer-members
          [projectId]="project.id"
          (selectMember)="onSelectMember($event)"
        ></worklenz-rpt-project-drawer-members>
      </nz-tab>
      <nz-tab [nzTitle]="'任务'">
        <worklenz-rpt-project-drawer-tasks [projectId]="project.id"></worklenz-rpt-project-drawer-tasks>
      </nz-tab>
    </nz-tabset>
  </ng-container>
</ng-template>

<ng-template #closeIcon>
  <worklenz-rpt-drawer-title
    [title]="team?.name || null"
    [icon]="'bank'"
  ></worklenz-rpt-drawer-title>
</ng-template>
